(() => {
    new Vue({
        el: '#bar1',
        data: {
            resdata: [], //返回的数据
            Data: [],//各专业数据
            Index: 0,//所选专业的下标
            avgScoreArr: [],
            stu_classArr: [],           
        },
        created() {
            this.conn()
        },
        mounted() {
            this.getData()
            this.getIndex()
            this.altIndex()
            this.drawEcharts()

        },
        methods: {
            //连接api
            conn() {
                axios
                    .all([
                        axios.get('http://localhost:8001/getClassAvg/classDashujuAvg'),                       
                        axios.get('http://localhost:8001/getClassAvg/classJisuanjiyingyongAvg'),
                        axios.get('http://localhost:8001/getClassAvg/classRuanjiangongchengAvg'),
                        axios.get('http://localhost:8001/getClassAvg/classRuanjianjishuAvg'),
                        axios.get('http://localhost:8001/getClassAvg/classWangluogongchengAvg'),
                        axios.get('http://localhost:8001/getClassAvg/classWangluojishuAvg'),
                        axios.get('http://localhost:8001/getClassAvg/classWulianwangAvg'),
                        axios.get('http://localhost:8001/getClassAvg/classXinxiguanliAvg')
                    ])
                    .then(response => (
                        this.resdata = response
                        // console.log("response:", this.resdata)
                    ))
            },

            //解析resdata 解析后台数据
            getData() {
                setTimeout(() => {
                    // console.log("getData:", this.resdata)
                    for (i = 0; i < this.resdata.length; i++) {
                        this.Data.push(this.resdata[i].data)
                    }
                    // console.log("Data:", this.Data)
                }, 500)
            },

            //获得点击下标
            getIndex() {
                setTimeout(() => {
                    window.index = 0
                    $('.sell').change(function () {
                        index = this.selectedIndex
                        // console.log("selectedIndex/window.index:", index)
                    })

                }, 500)
            },

            //赋值Index
            altIndex() {
                setTimeout(() => {
                    $('.sell').change(() => {
                        this.Index = index
                        // console.log("赋值Index:", this.Index)
                    })
                }, 1000)
            },

            //得到index后获取相应专业的数组,使用watch监视
            getArr() {
                setTimeout(() => {
                    console.log("====getArr()被调用了====")
                    console.log(this.Data[this.Index])
                }, 600)
            },

            //分别把相应专业的stu_class取出为列表
            getStu_class() {
                arr = []
                this.stu_classArr.length = 0
                setTimeout(() => {
                    arr = this.Data[this.Index]
                    for (i = 0; i < arr.length; i++) {
                        this.stu_classArr.push(arr[i].stu_class)
                    }
                }, 555)
                // console.log("this.stu_classArr:",this.stu_classArr)
            },

            //分别把相应专业的avgScore取出为列表
            getAvgScore() {
                arr = []
                this.avgScoreArr.length = 0
                setTimeout(() => {
                    arr = this.Data[this.Index]
                    for (i = 0; i < arr.length; i++) {
                        this.avgScoreArr.push(arr[i].avgScore)
                    }
                }, 555)
                // console.log("this.avgScoreArr",this.avgScoreArr)
            },

            //=====echarts======
            drawEcharts() {
                setTimeout(() => {
                    myChart = echarts.init(document.getElementById('bar1')),
                        option = {
                            grid: {
                                top: "25%",
                                bottom: "10%"
                            },
                            tooltip: {
                                trigger: "axis",
                                axisPointer: {
                                    type: "shadow",
                                    label: {
                                        show: false
                                    }
                                }
                            },
                            legend: {
                                right: '0',
                                textStyle: {
                                    color: "rgba(250,250,250,0.6)",
                                    fontSize: 9
                                }
                            },
                            xAxis: {
                                data: this.stu_classArr,
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        show: false
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    show: false,
                                },

                            },
                            yAxis: [{
                                type: "value",
                                splitLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: 'rgba(250,250,250,0.6)',
                                        width: 0.3
                                    }
                                },
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: "rgba(250,250,250,0.6)",
                                        fontSize: 9
                                    },
                                },

                            },
                            {
                                type: "value",
                                gridIndex: 0,
                                min: 50,
                                max: 100,
                                splitNumber: 8,
                                splitLine: {
                                    show: false
                                },
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    show: false
                                },
                                splitArea: {
                                    show: true,
                                    areaStyle: {
                                        color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                                    }
                                }
                            }
                            ],
                            series: [
                                {
                                    name: "平均分",
                                    type: "bar",
                                    barWidth: 9,
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0.7, [{
                                                offset: 0,
                                                color: 'rgb(46,200,207,1)'
                                            }, {
                                                offset: 1,
                                                color: 'rgb(57,89,255,1)'
                                            }])
                                        }
                                    },
                                    data: this.avgScoreArr
                                }
                            ]
                        };
                    myChart.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });
                }, 600)
            }
            //=====echarts======

            

        },
        watch: {
            Index: {
                immediate: true,
                handler(newValue, oldValue) {
                    // console.log("Index被修改了", newValue, oldValue);
                    this.getStu_class()
                    this.getAvgScore()
                    this.drawEcharts()
                }
            }
           

        }

    })
})();